<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>消缺任务 - 管道巡检App</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body { 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            -webkit-user-select: none;
            user-select: none;
        }
        .ios-statusbar {
            height: 44px;
            background: linear-gradient(135deg, #000 0%, #333 100%);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            color: white;
            font-size: 14px;
            font-weight: 600;
        }
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-top: 1px solid #e5e7eb;
            padding: 8px 0 20px 0;
        }
    </style>
</head>
<body class="bg-gray-50 pb-20">
    <!-- iOS状态栏 -->
    <div class="ios-statusbar">
        <span>9:41</span>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal"></i>
            <i class="fas fa-wifi"></i>
            <div class="w-6 h-3 border border-white rounded-sm">
                <div class="w-4 h-1.5 bg-white rounded-sm m-0.5"></div>
            </div>
        </div>
    </div>

    <!-- 顶部导航 -->
    <div class="bg-white px-4 py-4 border-b border-gray-200">
        <div class="flex justify-between items-center">
            <button class="w-8 h-8 flex items-center justify-center">
                <i class="fas fa-arrow-left text-gray-600"></i>
            </button>
            <h1 class="text-lg font-semibold text-gray-800">消缺任务</h1>
            <button class="w-8 h-8 flex items-center justify-center">
                <i class="fas fa-filter text-gray-600"></i>
            </button>
        </div>
    </div>

    <!-- 状态筛选 -->
    <div class="bg-white px-4 py-4">
        <div class="flex space-x-3 overflow-x-auto">
            <button class="bg-green-500 text-white px-4 py-2 rounded-full text-sm whitespace-nowrap">
                全部任务 (12)
            </button>
            <button class="bg-gray-100 text-gray-700 px-4 py-2 rounded-full text-sm whitespace-nowrap">
                待接收 (3)
            </button>
            <button class="bg-gray-100 text-gray-700 px-4 py-2 rounded-full text-sm whitespace-nowrap">
                处理中 (4)
            </button>
            <button class="bg-gray-100 text-gray-700 px-4 py-2 rounded-full text-sm whitespace-nowrap">
                已完成 (5)
            </button>
        </div>
    </div>

    <!-- 任务列表 -->
    <div class="px-4 py-4 space-y-4">
        <!-- 紧急消缺任务 -->
        <div class="bg-white rounded-2xl p-4 shadow-sm border border-red-200">
            <div class="flex justify-between items-start mb-3">
                <div class="flex items-center space-x-2">
                    <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">紧急</span>
                    <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">待接收</span>
                </div>
                <button class="text-gray-400">
                    <i class="fas fa-ellipsis-v"></i>
                </button>
            </div>
            
            <h3 class="font-semibold text-gray-800 mb-2">A-001-003管体泄漏处理</h3>
            <p class="text-sm text-gray-600 mb-3">管体出现明显泄漏，周围土壤有油污，需立即处理防止扩散</p>
            
            <div class="bg-red-50 p-3 rounded-xl mb-4">
                <div class="flex items-center space-x-2 text-red-700">
                    <i class="fas fa-clock"></i>
                    <span class="text-sm font-medium">要求完成时间: 2小时内</span>
                </div>
                <div class="flex items-center space-x-2 text-red-700 mt-1">
                    <i class="fas fa-map-marker-alt"></i>
                    <span class="text-sm">输油主干线A-001 第3里程桩</span>
                </div>
            </div>
            
            <div class="flex items-center justify-between text-sm text-gray-500 mb-4">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-user"></i>
                    <span>发现人: 李巡检员</span>
                </div>
                <div class="flex items-center space-x-2">
                    <i class="fas fa-calendar"></i>
                    <span>今天 14:30</span>
                </div>
            </div>
            
            <div class="flex space-x-3">
                <button class="flex-1 bg-red-500 text-white py-3 rounded-xl font-medium">
                    <i class="fas fa-hand-paper mr-2"></i>立即接收
                </button>
                <button class="px-4 py-3 bg-red-100 text-red-700 rounded-xl">
                    <i class="fas fa-info-circle"></i>
                </button>
            </div>
        </div>

        <!-- 进行中任务 -->
        <div class="bg-white rounded-2xl p-4 shadow-sm border border-blue-200">
            <div class="flex justify-between items-start mb-3">
                <div class="flex items-center space-x-2">
                    <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">严重</span>
                    <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">处理中</span>
                </div>
                <button class="text-gray-400">
                    <i class="fas fa-ellipsis-v"></i>
                </button>
            </div>
            
            <h3 class="font-semibold text-gray-800 mb-2">B-002-005防腐层修复</h3>
            <p class="text-sm text-gray-600 mb-3">防腐层大面积剥落，需要重新涂装防腐材料</p>
            
            <div class="bg-blue-50 p-3 rounded-xl mb-4">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-medium text-blue-700">处理进度</span>
                    <span class="text-sm text-blue-700">65%</span>
                </div>
                <div class="w-full bg-blue-200 rounded-full h-2">
                    <div class="bg-blue-600 h-2 rounded-full" style="width: 65%"></div>
                </div>
                <div class="mt-2 text-xs text-blue-600">
                    <i class="fas fa-tools mr-1"></i>已完成表面清理，正在涂装
                </div>
            </div>
            
            <div class="flex items-center justify-between text-sm text-gray-500 mb-4">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-clock"></i>
                    <span>开始时间: 09:30</span>
                </div>
                <div class="flex items-center space-x-2">
                    <i class="fas fa-hourglass-half"></i>
                    <span>预计完成: 16:00</span>
                </div>
            </div>
            
            <div class="flex space-x-3">
                <button class="flex-1 bg-blue-500 text-white py-3 rounded-xl font-medium">
                    <i class="fas fa-camera mr-2"></i>更新进度
                </button>
                <button class="px-4 py-3 bg-blue-100 text-blue-700 rounded-xl">
                    <i class="fas fa-pause"></i>
                </button>
            </div>
        </div>

        <!-- 已完成任务 -->
        <div class="bg-white rounded-2xl p-4 shadow-sm">
            <div class="flex justify-between items-start mb-3">
                <div class="flex items-center space-x-2">
                    <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">一般</span>
                    <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">已完成</span>
                </div>
                <button class="text-gray-400">
                    <i class="fas fa-ellipsis-v"></i>
                </button>
            </div>
            
            <h3 class="font-semibold text-gray-800 mb-2">C-003-008标识牌更换</h3>
            <p class="text-sm text-gray-600 mb-3">已成功更换里程桩标识牌，字迹清晰可见</p>
            
            <div class="bg-green-50 p-3 rounded-xl mb-4">
                <div class="flex items-center space-x-2 text-green-700">
                    <i class="fas fa-check-circle"></i>
                    <span class="text-sm font-medium">任务已完成</span>
                </div>
                <div class="text-xs text-green-600 mt-1">
                    完成时间: 昨天 15:20 • 用时: 2小时
                </div>
            </div>
            
            <!-- 完成照片 -->
            <div class="mb-4">
                <p class="text-sm text-gray-600 mb-2">完成照片:</p>
                <div class="flex space-x-2">
                    <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=80&h=60&fit=crop" 
                         alt="完成照片" class="w-20 h-15 object-cover rounded border">
                    <img src="https://images.unsplash.com/photo-1516321165247-4aa89a48be28?w=80&h=60&fit=crop" 
                         alt="完成照片" class="w-20 h-15 object-cover rounded border">
                </div>
            </div>
            
            <div class="flex space-x-3">
                <button class="flex-1 bg-green-100 text-green-700 py-3 rounded-xl font-medium">
                    <i class="fas fa-file-alt mr-2"></i>查看报告
                </button>
                <button class="px-4 py-3 bg-gray-100 text-gray-700 rounded-xl">
                    <i class="fas fa-share"></i>
                </button>
            </div>
        </div>

        <!-- 待接收任务 -->
        <div class="bg-white rounded-2xl p-4 shadow-sm border border-yellow-200">
            <div class="flex justify-between items-start mb-3">
                <div class="flex items-center space-x-2">
                    <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">一般</span>
                    <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">待接收</span>
                </div>
                <button class="text-gray-400">
                    <i class="fas fa-ellipsis-v"></i>
                </button>
            </div>
            
            <h3 class="font-semibold text-gray-800 mb-2">D-004-002杂草清理</h3>
            <p class="text-sm text-gray-600 mb-3">清理里程桩周围杂草，确保巡检路径畅通</p>
            
            <div class="flex items-center justify-between text-sm text-gray-500 mb-4">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-clock"></i>
                    <span>预计用时: 1-2小时</span>
                </div>
                <div class="flex items-center space-x-2">
                    <i class="fas fa-calendar"></i>
                    <span>明天 08:00</span>
                </div>
            </div>
            
            <button class="w-full bg-yellow-500 text-white py-3 rounded-xl font-medium">
                <i class="fas fa-hand-paper mr-2"></i>接收任务
            </button>
        </div>
    </div>

    <!-- 快捷操作浮动按钮 -->
    <div class="fixed bottom-24 right-4">
        <button class="w-14 h-14 bg-green-500 text-white rounded-full shadow-2xl flex items-center justify-center">
            <i class="fas fa-plus text-xl"></i>
        </button>
    </div>

    <!-- 底部标签栏 -->
    <div class="tab-bar">
        <div class="grid grid-cols-4 gap-1">
            <button class="flex flex-col items-center py-2 text-gray-400">
                <i class="fas fa-home text-lg mb-1"></i>
                <span class="text-xs">首页</span>
            </button>
            <button class="flex flex-col items-center py-2 text-gray-400">
                <i class="fas fa-clipboard-list text-lg mb-1"></i>
                <span class="text-xs">任务</span>
            </button>
            <button class="flex flex-col items-center py-2 text-gray-400">
                <i class="fas fa-camera text-lg mb-1"></i>
                <span class="text-xs">上报</span>
            </button>
            <button class="flex flex-col items-center py-2 text-gray-400">
                <i class="fas fa-user text-lg mb-1"></i>
                <span class="text-xs">我的</span>
            </button>
        </div>
    </div>
</body>
</html>